<template>
  <a-modal v-model:open="isShow" @cancel="handleCancel" title="新增海运轨迹信息" width="100%" wrap-class-name="full-modal">
    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确定</a-button>
    </template>
    <a-spin :spinning="loading">
      <a-collapse v-model:activeKey="activeKey" ghost>
        <a-collapse-panel key="1">
          <template #header>
            <span class="collapse-header">基本信息</span>
          </template>
          <a-form
              ref="baseForm"
              :model="baseFormState"
              :rules="baseRules"
              :label-col="{span: 7}"
          >
            <a-row>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="bookingNo" label="提单号" name="bookingNo">
                  <a-input v-model:value="baseFormState.bookingNo" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="containerNo" label="柜号" name="containerNo">
                  <a-input v-model:value="baseFormState.containerNo" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="shipOwner" label="船东" name="shipOwner">
                  <a-input v-model:value="baseFormState.shipOwner" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="fromWarehouse" label="发货仓" name="fromWarehouse">
                  <a-input v-model:value="baseFormState.fromWarehouse" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="toWarehouse" label="目的仓" name="toWarehouse">
                  <a-input v-model:value="baseFormState.toWarehouse" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="shipmentPort" label="起运港" name="shipmentPort">
                  <a-input v-model:value="baseFormState.shipmentPort" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="targetPort" label="目的港" name="targetPort">
                  <a-input v-model:value="baseFormState.targetPort" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="country" label="国家" name="country">
                  <a-select v-model:value="baseFormState.country" :options="countryList"/>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="containerWeight" label="空柜重(kg)" name="containerWeight">
                  <a-input  v-model:value="baseFormState.containerWeight" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="containerType" label="柜型" name="containerType">
                  <a-select v-model:value="baseFormState.containerType">
                    <a-select-option value="20GP">20GP</a-select-option>
                    <a-select-option value="40GP">40GP</a-select-option>
                    <a-select-option value="40HQ">40HQ</a-select-option>
                    <a-select-option value="45HQ/53FT">45HQ/53FT</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="memo" label="备注" name="memo">
                  <a-textarea v-model:value="baseFormState.memo"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-collapse-panel>
        <a-collapse-panel key="2">
          <template #header>
            <span class="collapse-header">轨迹信息</span>
          </template>
          <a-form
              ref="trackForm"
              :model="trackFormState"
              :rules="trackRules"
              :label-col="{span: 7}"
              class="track-form"
          >
            <a-row>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="loadingTime" label="装柜时间" name="loadingTime">
                  <a-date-picker value-format="YYYY-MM-DD" v-model:value="trackFormState.loadingTime" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="etdDate" label="预计离港时间" name="etdDate">
                  <a-date-picker v-model:value="trackFormState.etdDate" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="atdDate" label="实际离港时间" name="atdDate">
                  <a-date-picker v-model:value="trackFormState.atdDate" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="etaDate" label="预计到港时间" name="etaDate">
                  <a-date-picker v-model:value="trackFormState.etaDate" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="ataDate" label="实际到港时间" name="ataDate">
                  <a-date-picker v-model:value="trackFormState.ataDate" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="unloadContainerTime" label="卸船日期" name="unloadContainerTime">
                  <a-date-picker v-model:value="trackFormState.unloadContainerTime" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="arrivalWarehouseTime" label="送仓日期" name="arrivalWarehouseTime">
                  <a-date-picker v-model:value="trackFormState.arrivalWarehouseTime" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="uploadGoodsTime" label="卸货日期" name="uploadGoodsTime">
                  <a-date-picker v-model:value="trackFormState.uploadGoodsTime" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="shelvesAddedTime" label="开始上架时间" name="shelvesAddedTime">
                  <a-date-picker v-model:value="trackFormState.shelvesAddedTime" value-format="YYYY-MM-DD" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-collapse-panel>
        <a-collapse-panel key="3">
          <template #header>
            <span class="collapse-header">卡车信息</span>
          </template>
          <a-form
              :model="truckFormState"
              :label-col="{span: 7}"
          >
            <a-row>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="driverTel" label="司机电话" name="driverTel">
                  <a-input v-model:value="baseFormState.driverTel" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="licenseNum" label="货车车牌号" name="licenseNum">
                  <a-input v-model:value="baseFormState.licenseNum" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item ref="sealCode" label="封条号" name="sealCode">
                  <a-input v-model:value="baseFormState.sealCode" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="柜子图片">
                 <uploadImage :action="action"  v-model:list="truckFormState.containerList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="柜子情况">
                  <uploadImage :action="action" v-model:list="truckFormState.conditionList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="第一排照片">
                  <uploadImage :action="action" v-model:list="truckFormState.firstRowList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="中间照片">
                  <uploadImage :action="action" v-model:list="truckFormState.middleContainerList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="满柜照片">
                  <uploadImage :action="action" v-model:list="truckFormState.fullContainerList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="关半边门照片">
                  <uploadImage :action="action" v-model:list="truckFormState.halfDoorList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="装箱单照片">
                  <uploadImage :action="action" v-model:list="truckFormState.packingListList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="柜号照片">
                  <uploadImage :action="action" v-model:list="truckFormState.containerNoList" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :xl="8" :xxl="6" :md="12" :lg="12">
                <a-form-item label="封条照片">
                  <uploadImage :action="action" v-model:list="truckFormState.sealList" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-collapse-panel>
      </a-collapse>
    </a-spin>
  </a-modal>
</template>
<script setup>
import { ref, computed, defineProps,reactive,onMounted } from 'vue'
import {getManyDictItems} from "@/api/system/dict.js";
import uploadImage from "@/components/upload/uploadImg.vue"
import {apiBaseUrl} from "@utils/service/index.js";
import {addShippingTrack} from "@/api/firstShipping/shippingMessage.js";
import {message} from "ant-design-vue";
const props = defineProps({
  openAdd:{
    type:Boolean,
  }
})
const countryList = ref([])
const activeKey = ref(['1','2','3'])
const emit = defineEmits(['close'])
const loading = ref(false)
const btnLoading = ref(false)
const trackForm = ref()
const baseForm = ref()
const action = ref(apiBaseUrl + 'sys/common/upload')
const trackRules = {
  loadingTime:[
      { required: true, message: '请选择装柜时间', trigger: 'blur' },
  ]
}
const truckFormState = reactive({
  containerList:[],
  conditionList:[],
  firstRowList:[],
  middleContainerList:[],
  halfDoorList:[],
  packingListList:[],
  containerNoList:[],
  sealList:[],
  fullContainerList:[]
})
const trackFormState = reactive({
  loadingTime:'',
  etdDate:'',
  atdDate:'',
  etaDate:'',
  ataDate:'',
  unloadContainerTime:'',
  arrivalWarehouseTime:'',
  uploadGoodsTime:'',
  shelvesAddedTime:'',
})
const baseFormState = reactive({
  bookingNo:'',
  containerNo:'',
  shipOwner:'',
  fromWarehouse:'',
  toWarehouse:'',
  shipmentPort:'',
  targetPort:'',
  containerWeight:'',
  containerType:'',
  country:'',
  memo:''
})
const baseRules = {
  bookingNo: [
      { required: true, message: '请输入提单号', trigger: 'blur' },
  ],
  containerNo: [
    {
      pattern: /^[A-Z]{4}\d{7}$/,
      message: '柜号格式错误'
    }
  ]
}
const handleCancel = () => {
  emit('close')
}
const isShow = computed(()=>{
  return props.openAdd
})
/**
 * 提交表单
 * @returns {Promise<void>}
 */
const handleOk = async () => {
  const v1 = baseForm.value.validate()
  const v2 = trackForm.value.validate()
  let truck = handleUpload(truckFormState)
  let obj = Object.assign({},baseFormState,trackFormState,truck)
  for (let objKey in obj) {
    if(obj[objKey] === ''){
      delete obj[objKey]
    }
  }
  try{
    btnLoading.value = true
    const res = await addShippingTrack(obj)
    message.success(res.message + '新增成功')
    handleCancel()
  }catch (e){
    message.error(e)
  }finally {
    btnLoading.value = false
  }
}
//处理上传的图片
const handleUpload = (item) => {
  let truck = {}
  for (let itemKey in item) {
    //截取xxxList并且拼接成xxxImg
    let str = itemKey.substring(0, itemKey.length - 4) + 'Img'
    truck[str] = ''
    if(item[itemKey].length > 0){
      //循环对象中的message属性，加入到truck对象中，并用逗号分隔
      item[itemKey].forEach(i=>{
        truck[str] += i.response.message + ','
        console.log(i.response.message)
      })
      //去掉最后一个逗号
      truck[str] = truck[str].substring(0, truck[str].length - 1)
    }else{
      //如果没有上传图片，则不加入到truck对象中
      delete item[itemKey]
    }
  }
  return truck
}
/**
 * 初始化字典数据
 * @returns {Promise<void>}
 */
const init = async () => {
  try{
    const res = await getManyDictItems({
      dictCodeList:"country"
    })
    countryList.value = res.result.country
  }catch (e){
    console.log(e)
  }
}
onMounted(()=>{
  init()
})
</script>
<style  lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh);
    min-width: 100vw
  }
  .ant-modal-body {
    flex: 1;
  }
}
.collapse-header{
  font-size: 16px;
  font-weight: bold;
}
.track-form{
  .ant-picker{
    width: 100%;
  }
}
</style>
